<template>
  <div class="main-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="card" shadow="never">
          <div slot="header">
            <span class="tips">查询条件</span>   
            <div class="right">
              <el-button icon="el-icon-search" type="primary" @click="queryData">
                    查询
                  </el-button>     
                  <el-button icon="el-icon-refresh-left" @click="reset">
                    重置
                  </el-button>     
            </div> 
          </div>
          <el-form label-width="100px">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                <el-form-item label="警情名称">
                  <el-input v-model="queryForm.name" clearable @keyup.enter.native="queryData"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                <el-form-item label="警情类型">
                  <el-select
                    v-model="queryForm.type"
                    style="width: 100%"
                    clearable
                    @clear="queryForm.type = ''"
                  >
                    <el-option v-for="item in typeAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                <el-form-item label="发布状态">
                  <el-select
                    v-model="queryForm.status"
                    style="width: 100%"
                    clearable
                    @clear="queryForm.status = ''"
                  >
                    <el-option label="待发布" value="0"></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="已完成" value="2"></el-option>
<!--                    <el-option label="已撤销" value="3"></el-option>-->
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
                <el-form-item label="发布时间">
                  <el-date-picker
                      v-model="queryForm.publish_time_start"
                      type="date"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-form-item>
              </el-col>           
             
            </el-row>         
          
          </el-form>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="card" shadow="never">
          <div slot="header">
            <span class="tips">警情管理列表</span>
            <el-button type="success" class="right" icon="el-icon-plus" @click="handleAdd">新增</el-button>
          </div>
          <el-table v-loading="listLoading" ref="listTable" stripe :data="list"
            :element-loading-text="elementLoadingText" border height="calc(100vh - 465px)">
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
            <!-- <el-table-column
              show-overflow-tooltip
              prop="id"
              label="序号"
              align="center"
              width="80px"
            ></el-table-column>             -->
            <el-table-column  label="序号" width="55" align="center">
              <template slot-scope="scope">
                {{(queryForm.pageNo-1) * queryForm.pageSize+scope.$index+1}}
              </template>
            </el-table-column>

            <el-table-column show-overflow-tooltip label="警情名称" align="left">
              <template #default="{ row }">                
                <el-link type="primary" @click="handlechuli(row)">{{row.name}}</el-link>
              </template>

            </el-table-column>
            <el-table-column show-overflow-tooltip prop="type_name" label="警情类型" align="center"
              width="120px"></el-table-column>
            <el-table-column show-overflow-tooltip prop="content" label="警情内容" align="left"></el-table-column>

            <el-table-column show-overflow-tooltip prop="status" label="发布状态" align="center" width="220px">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.status === 0">待发布</el-tag>
                <el-tag type="warning" v-if="scope.row.status === 1">已发布</el-tag>
                <el-tag v-if="scope.row.status === 2">已完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="协同时限" align="center" prop="expirationTime" width="200px">
            </el-table-column>
            <el-table-column show-overflow-tooltip label="发布时间" align="center" prop="publish_time" width="200px">
            </el-table-column>

            <el-table-column show-overflow-tooltip label="全程日志" align="center" width="120">
              <template #default="{ row }">
                <el-popover trigger="click" placement="left" width="450" >
                  <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                      <el-card class="cardpop" shadow="never">
                        <div slot="header">
                          <span class="tips">日志记录</span>

                        </div><el-timeline :reverse="reverse">
                        <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.operate_time">
                          {{activity.another_content}}
                        </el-timeline-item>
                      </el-timeline>
                      </el-card>
                    </el-col>
                  </el-row>

                  <el-button slot="reference" type="text" icon="el-icon-document" @click="handleRz(row)"></el-button>
                </el-popover>
              </template>
            </el-table-column>



            <el-table-column show-overflow-tooltip label="操作" width="236" align="center" fixed="right">
              <template #default="{ row }">
                <div style="text-align: right">
                <el-button plain @click="handleAdd(row)" type="primary" size="mini" v-show="row.status === 0">
                  编辑
                </el-button>
                <el-button plain @click="handlecancel(row)" type="danger" size="mini" v-show="row.status === 0">
                  删除
                </el-button>
                <el-button plain @click="cooperate(row)" type="primary" size="mini" v-show="row.status === 1">
                  协同督察
                </el-button>
                <el-button plain @click="backOne(row)" type="danger" size="mini" v-show="row.status === 1">
                  撤回协同
                </el-button>
                <el-button plain @click="feedback(row)" type="primary" size="mini" v-show="row.status === 2">
                  反馈详情
                </el-button>

                <el-dropdown trigger="click" @command="handleCommandmore" style="margin-left: 10px;"  v-show="row.status === 0">
                  <el-button plain size="mini" style="width: 80px;">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-circle-plus-outline"
                      :command="commandmoreValue('a', row)" v-show="row.status === 0">发布协同</el-dropdown-item>
<!--                    <el-dropdown-item icon="el-icon-refresh-left"-->
<!--                      :command="commandmoreValue('b', row)" v-show="row.status === 1">撤回协同</el-dropdown-item>-->
<!--                    <el-dropdown-item icon="el-icon-chat-dot-square"-->
<!--                      :command="commandmoreValue('c', row)" v-show="row.status === 2">反馈详情</el-dropdown-item>-->
                    <el-dropdown-item icon="el-icon-connection"
                      :command="commandmoreValue('d', row)" v-show="row.status === 0">协同部门</el-dropdown-item>
<!--                    <el-dropdown-item icon="el-icon-news"-->
<!--                      :command="commandmoreValue('e', row)" v-show="row.status === 1">协同督察</el-dropdown-item>-->
                  </el-dropdown-menu>
                </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination background :current-page="queryForm.pageNo" :page-size="queryForm.pageSize" :layout="layout"
            :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange2"></el-pagination>
        </el-card>
      </el-col>
    </el-row>
    <edit ref="edit" @fetch-data="fetchData"></edit>
    <views ref="views" @fetch-data="fetchData"></views>
    <bumen ref="bumen" @fetch-data="fetchData"></bumen>
    <ducha ref="ducha" @fetch-data="fetchData"></ducha>
  </div>
</template>

<script>
import Views from './components/view'
import Edit from './components/edit'
import Bumen from './components/bumenlist'
import Ducha from './components/dclist'
import { pageList,alarmList,deleteOne,publishWarningOrder,backWarningOrder ,getAllLog} from '@/api/warningOrder'
export default {
  name: 'Index',
  components: { Views, Edit,Bumen,Ducha },
  data() {
    return {
      reverse: true,
      activities: [],
      value1: '',
      checked: false,
      isShow: false,
      list: null,
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      selectRows: '',
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        name: '',
        type: '',
        status: '',
        publish_time_start: '',
        discriminate: 1,
      },
      typeAllList: [],//类型列表
    }
  },  
  created() {
    var nameTemp = this.$route.query.name;
    if (nameTemp != '' && nameTemp != undefined && nameTemp != null){
      this.queryForm.name = nameTemp;
    }
    this.fetchData()
    this.typeList()
  },

  watch: {
    $route(to, from) {
      window.location.reload(); //监测到路由发生跳转时刷新一次页面
    },
  },
  beforeDestroy() { },
  mounted() { },
  methods: {
    handleCurrentChange(val) {
      this.selectRows = val
    },
    handleAdd(row) {
      if (row.id) {
      this.$refs['edit'].showDia(row)}
      else{
        this.$refs['edit'].showDia()}
     },
  commandmoreValue(command, row) {
      return {
        row: row,
        command: command,
      }
    },

    //撤回协同
    backOne(row) {
      this.$baseConfirm('确认要撤回吗？', null, async () => {
        backWarningOrder(row).then((res) => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '撤销成功',
            })
            this.fetchData();
          }else {
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        })
      })
   },
  handleCommandmore(val) {
    var command = val.command
    switch (command) {
      case 'a': //发布协同
      this.$confirm('是否发布协同？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            publishWarningOrder(val.row).then((res) => {
              if (res.code == 0){
                this.$message({
                  type: 'success',
                  message: '发布成功',
                })
                this.fetchData();
              }else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                })
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
        break
      case 'b': //撤回协同
        this.$confirm('是否撤回协同？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            backWarningOrder(val.row).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: 'success',
                  message: '撤销成功',
                })
                this.fetchData();
              }else {
                this.$message({
                  type: 'error',
                  message: res.msg,
                })
              }
            })

            // this.$message.error('撤消成功');
            //this.responseEvent(val.row.id)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
        break
      case 'c': //反馈详情
        this.$refs['ducha'].showDia(val.row)
        break
      case 'd': //协同部门
        this.$refs['bumen'].showDia(val.row)
        break
      case 'e': //协同督察
        this.$refs['ducha'].showDia(val.row)
        break
      default:
        //这里是没有找到对应的值处理
        break
    }
  },
    cooperate(row){
      this.$refs['ducha'].showDia(row)
    },
    feedback(row){
      this.$refs['ducha'].showDia(row)
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange2(val) {
      this.queryForm.pageNo = val
      this.fetchData()
    },
    handlechuli(row) {
      this.$refs['views'].showDia(row)
    },
    handlecancel(row) {
      if (row.id) {
        this.$baseConfirm('确认要删除吗？', null, async () => {
          const { data } = await deleteOne(row)
          this.$baseMessage("删除成功", 'success')

          // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
          const totalPage = Math.ceil((this.total - 1) / this.queryForm.pageSize) // 总页数
          this.queryForm.pageNo = this.queryForm.pageNo > totalPage ? totalPage : this.queryForm.pageNo
          this.queryForm.pageNo = this.queryForm.pageNo < 1 ? 1 : this.queryForm.pageNo


          this.fetchData()
        })
      } else {
        this.$baseMessage("删除失败", 'error')
      }
    },
    reset(){
      this.queryForm.name = '';
      this.queryForm.type = '';
      this.queryForm.status = '';
      this.queryForm.publish_time_start = '';
      this.fetchData()
    },
    queryData() {
      this.queryForm.pageNo = 1
      this.fetchData()
    },
    moreQuery() {
      this.isShow = !this.isShow
    },
    async fetchData() {
      this.listLoading = true
      const { data, totalCount } = await pageList(this.queryForm)
      this.list = data.list
      this.total = data.total
      setTimeout(() => {
        this.listLoading = false
      }, 300)
    },
    //获取所有警令类型
    async typeList() {
      const { data } = await alarmList();
      this.typeAllList = data;
    },
    handleRz(row) {
      getAllLog(row).then((res) => {
        this.activities = res.data;
      })
      // if (row.id) {
      //   this.$refs['rizhi'].showDia(row)
      // }
      // else {
      //   this.$refs['rizhi'].showDia()
      // }
    },
  },
}
</script>
